<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>单车状态查询</title>
    <link rel="stylesheet" href="../layui/css/layui.css">
    <style>
        .search-container {
            display: flex;
            align-items: center;
            padding: 10px;
        }
        .search-container input{
            padding: 10px;
            font-size: 16px;
            /*border: none;*/
            border-radius: 20px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            width: 300px;
            transition: box-shadow 0.3s ease;
            margin-right: 10px;
        }
        .search-container input:focus{
            outline: none;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }
        .search-container button {
            margin-right: 10px;
        }
        #searchBB{
            height: 36px;
            line-height: 17px;
            padding: 0 10px;
            font-size: 15px;
        }
    </style>
</head>

<body>
<div class="layui-container">
    <div style="text-align: center; margin-bottom: 15px;">
        <p1 style="font-size:28px;">单车状态查询</p1>
    </div>
        <div class="search-container">
            <button type="button" class="layui-btn layui-btn-sm" onclick="addBicycle()">+增加单车</button>
            <input type="text" id="searchDemo" name="searchDemo" required lay-verify="required" placeholder="请输入单车编号" autocomplete="off" class="layui-input">
            <button type="button" class="layui-btn layui-btn-sm" id="searchBB" onclick="searchBicycle()">查询</button>
        </div>

        <div class="table-container">
            <table class="layui-table">
                <thead>
                <tr>
                    <th style="text-align: center">单车编号</th>
                    <th style="text-align: center">位置</th>
                    <th style="text-align: center">状态</th>
                    <th style="text-align: center">类型</th>
                    <th style="text-align: center">操作</th>
<!--                    <th style="text-align: center">修改</th>-->
                </tr>
                </thead>
                <tbody id="tableBody">
                </tbody>
            </table>
        </div>
</div>

<script src="../layui/layui.js"></script>
<script src="../js/public.js"></script>
<script>
    layui.use(['form', 'layer', 'table'], function () {
        var table = layui.table,
            form = layui.form,
            $ = layui.$;
        var geturl = url + user.rideStatus;
        var element = layui.element;
        var $ = layui.jquery;

        $.ajax({
            type: "POST",
            url: geturl,
            data: JSON,
            contentType: 'application/json',
            success: function (data) {
                var tableBody = $('#tableBody');
                console.log(data)
                data.data.forEach(function (item) {
                    var row = '<tr>' +
                        '<td>' + item.bicycleNumber + '</td>' +
                        '<td>' + item.location + '</td>' +
                        '<td>' + item.status + '</td>' +
                        '<td>' + item.store + '</td>' +
                        '<td>' + '<div style="margin-left: 32px;width: 20px;display: flex;">' +
                        '<button type="button" class="layui-btn layui-btn-sm" style="margin:auto" onclick="deleteBicycle(\'' + item.bicycleNumber + '\')">删除</button>' +
                        '<button type="button" class="layui-btn layui-btn-sm" style="margin:auto;margin-left: 22px;" onclick="updateBicycle()">修改</button></div>' +
                        '</td>' +
                        // '<td>' + '<div style="margin-left: 32px;width: 20px;"><button type="button" class="layui-btn layui-btn-sm" style="margin:auto" onclick="updateBicycle()">修改</button></div>' + '</td>' +
                        '</tr>';
                    tableBody.append(row);
                });
            }
        });
    });

    function addBicycle() {
        layer.open({
            type: 2,
            title: '增加单车',
            area: ['60%', '70%'], //宽高
            content: 'addBicycle.html',
            offset: '40px'
        });
    }

    function deleteBicycle(bicycleNumber) {
        var geturl = url + list.delete;
        var element = layui.element;
        var $ = layui.jquery;
        $.ajax({
            type: "POST",
            url: geturl,
            data: JSON.stringify({ bicycleNumber: bicycleNumber }),
            contentType: 'application/json',
            success: function () {
                alert("删除成功")
                location.reload();
            }
        })
    }

    function updateBicycle() {
        layer.open({
            type: 2,
            title: '修改单车信息',
            area: ['60%', '70%'], //宽高
            content: 'updateBicycle.html',
            offset: '40px'
        });
    }

    function searchBicycle() {
        var geturl = url + list.search;
        var element = layui.element;
        var $ = layui.jquery;
        var bicycleNumber = $('#searchDemo').val();
        if (bicycleNumber) {
            $.ajax({
                type: "POST",
                url: geturl,
                data: JSON.stringify({bicycleNumber: bicycleNumber}),
                contentType: 'application/json',
                success: function (data) {
                    console.log(data)
                    var tableBody = $('#tableBody');
                    tableBody.empty(); // 清空表格
                            var row = '<tr>' +
                                '<td>' + data.bicycleNumber + '</td>' +
                                '<td>' + data.location + '</td>' +
                                '<td>' + data.status + '</td>' +
                                '<td>' + data.store + '</td>' +
                                '<td>' + '<div style="margin-left: 32px;width: 20px;"><button type="button" class="layui-btn layui-btn-sm" style="margin:auto" onclick="deleteBicycle(\'' + data.bicycleNumber + '\')">删除</button></div>' + '</td>' +
                                '<td>' + '<div style="margin-left: 32px;width: 20px;"><button type="button" class="layui-btn layui-btn-sm" style="margin:auto" onclick="updateBicycle(\'' + data.bicycleNumber + '\')">修改</button></div>' + '</td>' +
                                '</tr>';
                            tableBody.append(row);
                }
            })
        }else {
            layui.layer.msg('请输入单车编号');
        }
    }
</script>
</body>

</html>
